// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview',
}

// 1.3 创建裁剪区域
$image.cropper(options)

//头像上传
//1.选择图片
$('#chooseImageBtn').on('click', function () {
  $('#chooseImageInp').click()
})

//2.选择图片，渲染到页面
let layer = layui.layer
$('#chooseImageInp').on('change', function () {
  let file = this.files[0]
  //非空校验
  if (file === undefined) {
    return layer.msg('请上传图片!')
  }

  //根据文件对象，生成路径
  let url = URL.createObjectURL(file)

  //给预览图片区域赋值
  $image.cropper('destroy').attr('src', url).cropper(options)
})

//3.上传图片
$('#uploadBtn').on('click', function () {
  //把裁剪域域的图片，转换成base64格式字符串
  let dataURL = $image
    .cropper('getCroppedCanvas', {
      width: 100,
      height: 100,
    })
    .toDataURL('image/png')
  // console.log(dataURL)
  //发送axios请求
  axios({
    method: 'post',
    url: '/my/update/avatar',
    data: `avatar=${encodeURIComponent(dataURL)}`,
  }).then(res => {
    //判断业务码
    if (res.data.status !== 0) {
      return layui.layer.msg(res.data.message)
    }
    //成功提示
    layui.layer.msg('恭喜您，更改用户头像成功!')
    window.parent.getUserInfo()
  })
})

//4.
